关于vue :style 的几种使用方式

:style的使用

一 ,最通用的写法 

{{con.title}}

二， 三元表达式

  一和二 可以联合起来写 如下

{{con.title}}

这两种方式有个弊端，当需要把很多个样式添加到div上时，div看起来很臃肿

三 ,结合计算属性 将样式都提出来 最后形成一个变量 把这个变量添加到div上

这里要做的工作分几步

1>通过计算属性把要放到一起的样式归整一下

2>针对默认值是空值或者特定值的样式 是不需要将这个样式放到div上的。

举例：如果div 已在css样式里设置了font-size 是16px，那么div行内样式 就不要存在font-size:16px 这种重复没有意义 就要做判断去除

这里想到的办法是：

用一个变量存入16 这里是conFontSize，如果conFontSize值等于16 那么就让font-size:''为空 然后通过循环style 将为空的font-size 去掉。

如果不等于16 就是修改的，就要正常显示

3>将:style="arr.styles.conTitleStyle"添加到div上

代码如下：

js:

html:

{{con.title}}

　　最后成果 当font-size是16px时

当font-size 不是16px时  行内样式出现font-size了

 四，上面arr.styles里我存放两个样式 分别是conTitleStyle和conLiStyle ，在有的模块里，我需要将这两个样式放到一个div上面。

我实验一下用&& 连接，

{{con.title}}

发现只有后面的那个生效。我希望两个都生效 所以得用数组

{{con.title}}

五，也可以这样写 如下 变量和样式一起写 也是一同生效的

至此 就写完了。